<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详解vue 的生命周期&每个阶段做的事</title>
    <style> .classA { color:blue; }

      .classB { color:red;}</style>
</head>
<body> 
  <p class="classB classA">hello</p>
  <p class="classA classB">hello</p>
</body>
</html>
<script>
/*
…………//什么是生命周期
    Vue 的生命周期指的是组件从创建到销毁的一系列的过程，被称为 Vue 的生命周期。
    通过提供的 Vue 在生命周期各个阶段的钩子函数，我们可以很好的在 Vue 的各个生命阶段实现一些操作。


…………//生命周期
        ##beforeCreate (创建前)  
          在数据观测和初始化事件 还未开始 

        ##created      (创建后)                        ---------创建dom 
          完成数据观测 属性&方法运算 初始化事件 $el属性还没有显示出来 

        ##beforeMounted(挂载前)
          挂载渲染开始之前被调用相关的render函数被首次调用  
          实例已完成以下配置…………
          编译模板 把data里的数据和模板生成html 此时还未挂载html到页面上 
          
        ##mounted      (挂在后)                       
          在el被新创建的vm.$el替换 挂载到实例上去后调用 
          实例已完成以下配置…………
          用上面编译好的html替换el属性指向dom对象 完成模板中的html渲染到html中 
          此过程进行 ajax交互 

        ##beforeUpdate (更新前)
          在数据更新之前调用 可以在这个钩子中进一步更改状态 不会触发附加的重新渲染 

        ##updated      (更新后)
          由于数据的更改 致使vnode重新渲染&打补丁 
          调用时 组件dom已经更新 
          该钩子在服务器端渲染期间不被调用 
          
        ##beforeDestory(销毁前)                         ---------销毁前后不常用 优化会用到 
          在实例销毁之前调用 实例仍然可以完全可用 
          
        ##destoyed     (销毁后)
          调用后 所有的事件监听会被移除 所有的子实例也被销毁 
          该钩子在服务器端渲染期间不被调用   

…………//核心！      
        ##vue 两大核心是什么？
          数据驱动&组件化 


…………//语法
        ##详解v-if&v-show区别
          相同点: 两者都是在判断dom节点是否显示 
          不同点: v-if是根据后面数据的真假值判断从dom树上删除节点 
                  v-if是惰性的如果初始条为假则什么也不做
                  v-show只是在操作css样式 即diplay属性 元素始终在dom树      
                  v-show是在任何条件下(首次条件是否为真)都被编译
          性能:   v-if有更高的切换消耗 不适合做频繁的切换 
                  v-show适合做频繁切换 有更高的初始渲染消耗 
                  
…………//v-on可以绑定多个事件嘛？
        ##可以    
        
        
…………//vue中的key值的作用 
        ## 1使用key来给每一个节点做一个唯一的标识 
        ## 2key值的作用主要是为了高效的更新虚拟dom  
        ##  在vue中使用相同标签名元素过渡切换时 也需要使用的key属性 目的也是让vue区分他们 
            否则vue只会替换其内部属性儿不会触发过渡效果  
        ## 

1

…………//vue组件中data(){} 为啥是函数式的 
        ##在new Vue() data可以作为一个对象进行操作 
          然而在component中 data只能以函数的形式存在 不能直接将对象赋值给他 
        ##基于js的 当data是一个函数时 每个实例可以维护一份被返回对象的独立的拷贝 
          这样实例中的daa不会相互影响 是独立的  
          
…………//v-for&v-if的优先级 
        ##v-for的优先级是比v-if高的  
                  

…………//$route 和 $router 的区别？
    //$route 是“路由信息对象”，包括 path，params，hash，query，fullPath，matched，name 等路由信息参数。
    //而 $router 是“路由实例”对象包括了路由的跳转方法，钩子函数等。    


…………//computed 和 wacch区别？
    //computed名称不能和data的对象重复 只能用同步 必须有return 是多个值变化引起的一个值得变化(例：购物车小计...) 即多对一
    //watch   名称必须和data里对象一样 可用于异步 没有return   是一对多 监听一个值 一个值变化引发多个值 (例：搜索框)     
*/


</script>